<template>
  <div>
    <!--    <Button type="danger" event-type="downLoadTemp" @downLoadTemp="downLoadTemp" />-->
    <!--    <div slot="tip" class="el-upload__tip">一次性只能上传1个文件,单个文件大小不超过0.1MB</div>-->
    <el-form>
      <Excel :before-upload="beforeUpload" :on-success="onSuccess" style="align: center" />
      <el-form-item class="uploadExcel">
        <Button event-type="cancel" type="primary" @cancel="cancel" />
        <Button event-type="save" type="primary" @save="save" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Excel from '@/components/UploadExcel/index.vue'
import { Button } from '@/components/Elements'
export default {
  name: 'UploadExcel1',
  components: { Excel, Button },
  props: {
    type: {
      type: String,
      required: true
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      header: undefined,
      results: undefined
    }
  },
  methods: {
    downLoadTemp() {
      console.log(this.type)
    },
    // 文件上传一些的回调函数
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 0.1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: this.$t('tip.fileLargeLimit'),
        type: 'warning',
        duration: 1000
      })
      return false
    },
    // 解析成功时候会触发的回调函数，会返回表格的表头和内容
    onSuccess({ header, results }) {
      console.log(header)
      console.log(results)
      this.header = header
      this.results = results
    },
    cancel() {
      this.$layer.close(this.layerid)
    },
    save() {
      if (!this.results) {
        this.$message({
          message: this.$t('tip.uploadFirst'),
          type: 'warning',
          duration: 1000
        })
        return
      }
    }
  }
}
</script>
<style scoped>
  .uploadExcel {
    margin: 100px 0 0 200px;
  }
</style>
